<template>
  <!-- 未登录展示 -->
  <div class="login-container" v-if="isShowLogin">
    <div class="nav">
      <van-icon name="home-o" @click="toIndex" />
      <van-nav-bar title="网易严选" />
      <van-icon name="search" />
    </div>

    <!-- logo -->
    <div class="logo">
      <img style="width: 200px" src="//yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    </div>

    <!-- 登录 -->
    <van-button type="danger" size="large" @click="toLogin"><van-icon name="manager-o" />手机号登录</van-button>

    <!-- 注册 -->
    <van-button type="default" size="large" @click="toRegister"><van-icon name="manager-o" />无账号、去注册</van-button>
  </div>

  <!-- 已登陆展示 -->
  <div class="my-container" v-else>
    <!-- 顶部黄色区域 -->
    <div class="my-top">
      <div class="coverBox">
        <div>
          <img src="https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt="" />
        </div>
        <div class="userBox">
          <p class="one">{{ userInfo.name }}</p>
          <p class="two">普通用户</p>
        </div>
      </div>
    </div>

    <!-- 资产 -->
    <div class="mymoney">
      <!-- 标题 -->
      <van-row>
        <van-col span="8">我的资产</van-col>
      </van-row>

      <!-- 分割线 -->
      <van-divider />

      <div class="my-money">
        <div>
          <van-badge dot>
            <p class="child">￥ 0</p>
            <p>余额</p>
          </van-badge>
        </div>
        <div>
          <p class="child">0</p>
          <p>红包</p>
        </div>
        <div>
          <p class="child">0</p>
          <p>优惠券</p>
        </div>
        <div>
          <p class="child">0</p>
          <p>积分</p>
        </div>
        <div>
          <p class="child">0</p>
          <p>礼品卡</p>
        </div>
      </div>
    </div>

    <!-- 宫格 -->
    <van-grid :column-num="3">
      <van-grid-item icon="orders-o" text="我的订单" @click="toGoodsList" />
      <van-grid-item icon="friends-o" text="账号管理" @click="toJump" />
      <van-grid-item icon="phone-o" text="我的手机号" @click="toJump" />
      <van-grid-item icon="clock-o" text="周六一起拼" @click="toJump" />
      <van-grid-item icon="after-sale" text="售后服务" @click="toJump" />
      <van-grid-item icon="balance-pay" text="邀请返利" @click="toJump" />
      <van-grid-item icon="upgrade" text="有限购" @click="toJump" />
      <van-grid-item icon="gem-o" text="积分中心" @click="toJump" />
      <van-grid-item icon="friends-o" text="会员俱乐部" @click="toJump" />
      <van-grid-item icon="location-o" text="地址管理" @click="toAddress" />
      <van-grid-item icon="shield-o" text="支付安全" @click="toJump" />
      <van-grid-item icon="phone-circle-o" text="帮助与客服" @click="toJump" />
      <van-grid-item icon="comment-o" text="意见反馈" @click="toJump" />
      <van-grid-item icon="certificate" text="我的竞拍" @click="toJump" />
    </van-grid>

    <!-- 退出登录 -->
    <van-button class="my-logout" color="linear-gradient(to right, blue, red)" block @click="logout"> 退出登录 </van-button>
    <div style="height: 40px"></div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import { onMounted, ref } from 'vue'
import useUserStore from '@/store/userInfo'
import { storeToRefs } from 'pinia'
import { reqLogout } from '@/api/login'
import { showSuccessToast } from 'vant'
import 'vant/es/toast/style'

const toGoodsList = () => {
  // 去订单页
}

const toAddress = () => {
  // 去地址管理
  router.push('/address')
}

// 点击宫格跳转
const toJump = () => {
  showSuccessToast('You jump, I jump')
}

// 仓库实例化
const userStore = useUserStore()
// 拿用户信息
const { userInfo } = storeToRefs(userStore)
// 是否显示登陆页面
const isShowLogin = ref(true)

// 点击home回首页
const toIndex = () => {
  router.push('/')
}

// 点击去登录
const toLogin = () => {
  router.push('/login')
}

// 点击去注册
const toRegister = () => {
  router.push('/register')
}

// 进入页面获取token
onMounted(() => {
  const token = localStorage.getItem('token')

  if (token) {
    isShowLogin.value = false
  }
})

// 退出登录
const logout = async () => {
  const res = await reqLogout()

  if (res) {
    //  清除用户信息
    localStorage.removeItem('userInfo')

    // 清除token
    localStorage.removeItem('token')

    // 跳转登录页
    router.push('/login')

    // 提示用户
    showSuccessToast('退出成功')
  }
}
</script>

<script lang="ts">
export default {
  name: 'VMy'
}
</script>

<style lang="scss" scoped>
.logo {
  // width: 400px;
  display: flex;
  justify-content: center;
  margin-top: 150px;
}
.van-button {
  margin-top: 20px;
}
.van-icon {
  margin-right: 5px;
}
.my-container {
  background-color: rgb(221, 215, 215);
}
.nav {
  display: flex;
  justify-content: space-between;
  .van-icon {
    padding: 15px;
  }
  .van-nav-bar {
    width: 200px;
  }
}
.my-top {
  display: flex;
  height: 3.7rem;
  width: 375px;
  background-image: url('https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png');
  line-height: 2.7rem;

  .coverBox {
    display: flex;
    justify-content: space-between;
    padding: 0.54rem 0 0.34rem 0.34rem;
    width: 4.4rem;
    img {
      width: 78px;
      height: 78px;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
    }
  }
  .userBox {
    p {
      font-size: 0.28rem;
      line-height: 10px;
      color: white;
      margin: 15px;
    }
    .one {
      font-size: 19px;
    }
  }
}
.mymoney {
  background-color: white;
  font-size: 0.28rem;
  .van-col {
    margin: 15px 15px 0px 15px;
  }
  .van-divider {
    color: aqua;
  }
  .my-money {
    display: flex;
    justify-content: space-around;
    div {
      text-align: center;
    }
  }
}
.van-grid {
  background-color: white;
  font-size: 0.28rem;
  margin: 6px 0 0.5rem 0;
}
.my-logout {
  margin-bottom: 1.5rem;
}


</style>
